<template>
  <div class="login-log-list">
    <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="pa-5">
      <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :search.sync="searchForm"
        @on-load="loadListData"
        @search-change="onSearchChange"
        @search-reset="onSearchReset"
        @refresh-change="onRefresh"
        @selection-change="onSelectionChange"
        @filter-change="onFilterChange"
        @sort-change="onSortChange"
        @select="onSelect"
      >
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" size="small" @click="goDetail(row)">详情</el-button>
          <el-button v-if="row.approveStatus == '0'" type="text" size="small" @click="approve(row, '1')"
            >通过</el-button
          >
          <el-button v-if="row.approveStatus == '0'" type="text" size="small" @click="approve(row, '2')"
            >驳回</el-button
          >
        </template>
        <template slot="menuLeft" slot-scope="{ size }">
          <el-button type="primary" :size="size" :disabled="selectRow.length === 0" @click="multipleApprove('1')"
            >通过</el-button
          >
          <el-button type="danger" :size="size" :disabled="selectRow.length === 0" @click="multipleApprove('2')"
            >驳回</el-button
          >
        </template>
        <template slot="approveStatus" slot-scope="{ row }">
          <span :style="{ color: approveStatus[statusMap[row.approveStatus]] }">{{
            statusMap[row.approveStatus]
          }}</span>
        </template>
        <template slot="approveStatus" slot-scope="{ row }">
          <span class="approve-status">
            <span v-if="row.approveStatus === '2'" class="clickable">
              <span class="status-dot danger"></span>已驳回
            </span>
            <span v-else-if="row.approveStatus === '1'" class="clickable">
              <span class="status-dot success"></span>已授权
            </span>
            <span v-else> <span class="status-dot warning"></span>待审核 </span>
          </span>
        </template>
      </avue-crud>
    </de-container>
    <el-dialog :title="approveOption.title" :visible.sync="showApprove" width="50%">
      <avue-form ref="form" v-model="approveForm" :option="approveOption" @submit="submit">
        <template slot="menuForm" slot-scope="{ size }">
          <!-- <el-button plain :size="size" @click="$refs.form.resetForm()">暂存</el-button> -->
          <el-button :size="size" @click="showApprove = false">取消</el-button>
          <el-button type="primary" :size="size" @click="$refs.form.submit()">确定</el-button>
        </template>
      </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { getApplyHistory, approveUpdate, approveBatchUpdateStatus } from '@/api/chart/chart'
import DeContainer from '@/components/dataease/DeContainer'
import ListMixin from '@/utils/mixins/list-mixin'
// import { DATA_TYPE_OPTIONS } from './index.vue'
import { approveStatus } from '@/utils/color'
const statusMap = {
  0: '待审核',
  1: '通过',
  2: '驳回',
}
export default {
  name: 'ChatApprove',
  components: { DeContainer },
  mixins: [ListMixin],
  data() {
    return {
      listApi: getApplyHistory,
      approveStatus,
      statusMap,
      tableOption: {
        menuWidth: 120,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: true,
        index: true,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        column: [
          {
            label: '指标编码',
            prop: 'code',
            span: 12,
            align: 'left',
            overHidden: true,
            search: true,
          },
          {
            label: '指标名称',
            prop: 'name',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
          },
          {
            label: '指标分类',
            prop: 'indexType',
            type: 'select',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
            dicUrl: '/api/sys/dict/list',
            props: {
              label: 'dictValue',
              value: 'dictValue',
            },
            dicMethod: 'post',
            dicQuery: {
              dictTypeCode: 'martix_type',
            },
          },
          {
            label: '申请人',
            prop: 'userName',
            span: 12,
            align: 'left',
            search: true,
            overHidden: true,
          },
          {
            label: '申请原因',
            prop: 'reason',
            span: 12,
            overHidden: true,
            align: 'left',
          },
          {
            label: '审核状态',
            prop: 'approveStatus',
            span: 12,
            align: 'center',
            overHidden: true,
            type: 'select',
            search: true,
            dicData: [
              { label: '待审核', value: '0' },
              { label: '通过', value: '1' },
              { label: '驳回', value: '2' },
            ],
          },
          {
            label: '提交时间',
            prop: 'createdAt',
            span: 12,
            align: 'center',
            overHidden: true,
          },
        ],
      },
      approveOption: {
        title: '',
        submitBtn: false,
        emptyBtn: false,
        menuPosition: 'left',
        column: [
          {
            label: '审批意见',
            prop: 'approveRemark',
            span: 24,
            type: 'textarea',
          },
        ],
      },
      showApprove: false,
      approveForm: {
        approveRemark: '',
        approveStatus: '',
        id: '',
      },
      selectRow: [],
    }
  },
  methods: {
    goDetail(row) {
      this.$router.push(`/redirect/charts/view/${row.id}/?panelId=${row.panelId}`)
      // this.$router.push(`/redirect/charts/${row.id}/approve-detail`)
    },
    goApply(row) {
      this.$router.push(`/redirect/charts/${row.id}/apply`)
    },
    approve(row, type) {
      let { id } = row
      let title = ''
      if (type === '1') {
        title = '通过'
      } else {
        title = '驳回'
      }
      this.approveForm = {
        approveRemark: '',
        approveStatus: type,
        id,
      }
      this.$set(this.approveOption, 'title', title)
      this.showApprove = true
    },
    submit() {
      let { approveRemark, approveStatus, id } = this.approveForm
      approveUpdate({ approveRemark, approveStatus, id }).then((res) => {
        if (res.success) {
          this.$message.success(approveStatus === '1' ? '通过成功' : '驳回成功')
          this.showApprove = false
          this.onRefresh()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onSelectionChange(selection) {
      console.log(selection)
      let vaildRow = []
      let selectRow = []
      for (let row of selection) {
        if (row.approveStatus !== '0') {
          vaildRow.push(row)
        } else {
          selectRow.push(row)
        }
      }
      this.selectRow = selectRow
      this.$refs.crud.toggleSelection(vaildRow)
    },
    multipleApprove(approveStatus) {
      let ids = this.selectRow.map((item) => item.id)
      if (!ids.length) return
      this.$confirm(`是否确定批量${approveStatus === '1' ? '通过' : '驳回'}?`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        approveBatchUpdateStatus({ ids, approveStatus }).then((res) => {
          if (res.success) {
            this.$message.success(approveStatus === '1' ? '批量通过成功' : '批量驳回成功')
            this.onRefresh()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
  },
}
</script>

<style lang="scss"></style>
